<script setup lang='ts'>
import { SiderMenuInfo, SiderMenuEnum } from '@/models/@types';
defineProps<{ item: SiderMenuInfo, removeDesc: string, isCurr: boolean, isEdit: boolean, checked?: boolean }>();
const emits = defineEmits(['clickItem', 'edit', 'remove']);

</script>
<template>
  <div class="menu flex" :class="{ 'menu-activity': isCurr }"
    @click.stop="() => item.type === SiderMenuEnum.Group ? null : emits('clickItem')">
    <div class="left flex ellipsis">
      <a-checkbox v-if="isEdit" :model-value="checked" style="margin-right: 6px;"></a-checkbox>
      <icon-file size="17" /> {{ item.label }}
    </div>
    <div class="right">
      <icon-edit @click.stop="emits('edit')" />
      <a-popconfirm :content="removeDesc" type="error" @ok="emits('remove')">
        <icon-delete @click.stop="null" />
      </a-popconfirm>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.menu {
  margin: 10px 20px;
  position: relative;
  height: 100%;
  color: var(--color-neutral-8);
  padding: 10px 15px;
  border-radius: 2px;
  cursor: pointer;
  justify-content: space-between;
  background-color: var(--color-neutral-2);

  @media screen and (min-width: 1200px) {
    &:hover {
      transform: translateY(-1px);
      animation: all 1s;
    }
  }
}

.menu-activity {

  // border-color: #ffffff00;
  // background: rgb(var(--arcoblue-6));
  // color: #fff;
  position: relative;

  &::before {
    content: "";
    width: 6px;
    display: inline-block;
    background: rgb(var(--arcoblue-6));
    margin-right: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

}


.right {
  min-width: 35px;

  &>* {
    margin-right: 5px;

    &:last-child {
      margin: 0;
    }
  }
}
</style>
